//全局mixins

@nice-blue: #5B83AD;
.color {
  color: @nice-blue;
}

.my-hover-mixin() {
  &:hover {
    opacity: .8;
  }
}

button {
  .my-hover-mixin();
}

/*
button:hover {
  border: 1px solid red;
}*/

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}

.unimportant {
  .foo();
}

.important {
  .foo() !important;
}

/*
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}*/

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.big-block {
  .box-shadow(2px; 5px);
}

/*.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  box-shadow: 2px 5px 1px #000;
}*/

.bg-img(@url) {
  background-image: url(@url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bg-color(@color) {
  background-color: @color;
}

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

//定位上下左右居中
.center-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
.middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//宽高
.wh(@width, @height) {
  width: @width;
  height: @height;
}

//字体大小，颜色
.sc(@size, @color) {
  font-size: @size;
  color: @color;
}

.border(@color){
  border:1px solid @color;
}

//1px边框
.border-1px(@borderColor:#e2e2e2) {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid @borderColor;
    transform: scaleY(.5);
    -webkit-transform: scaleY(.5);
  }
}
.login-container {
    position: relative;
    width: 100%;
    height: 100%;
    .bg-img('../../assets/images/BG02.png');
    background-size: cover;
    .login-box {
      position: absolute;
      left: 916/1920*100%;
      top: 202/1080*100%;
      width: 480/1920*100%;
      height: 500/1080*100%;
      min-width: 360px;
      min-height: 500/480*360px;
      .border-radius(44px);
      .bg-color(#fff);
      .title {
        position: relative;
        margin-top: 106/480*100%;
        text-align: center;
        .sc(26px, #4a4a4a);
        &:before {
          content: '';
          position: absolute;
          left: 8%;
          width: 40/480*100%;
          padding-top: 38/480*100%;
          max-width: 40px;
          max-height: 38px;
          .bg-img('../../assets/images/login-log.png');
          .middle();
        }
      }
      .form-container {
        margin-top: 70/480*100%;
      }
      .form-item {
        position: relative;
        width: 300/480*100%;
        height: 40px;
        margin: 0 auto;
        input {
          width: 100%;
          height: 100%;
          padding: 5px 5px 5px 30px;
          border: 0;
          outline: 0;
          border-bottom: 1px solid #979797;
        }
        &:before {
          position: absolute;
          left: 10px;
          .middle();
          width: 16px;
          height: 16px;
          .sc(16px, #9b9b9b);
        }
      }
      .form-item + .form-item {
        margin-top: 30px;
        &:before {
          left: 12px;
          font-size: 17px;
        }
      }
      .form-login {
        width: 60%;
        margin: 10px auto;
        text-align: center;
      }
    }
  }